<template>
  <view class="background">
    <view class="order">
      <view v-if="repairRequest.status == 0" style="width:100%;height:300rpx;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: bold;color: orange">
        受理中
      </view>
      <view v-else style="width:100%;height:300rpx;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: bold;color: #2b85e4;">
        已完成
      </view>
      <view class="info">
        <view style="color: #909399;width: 30%;">报修人</view>
        <text>{{name}}</text>
      </view>
      <view class="info">
        <view style="color: #909399;width: 30%;">报修时间</view>
        <text>{{repairRequest.time}}</text>
      </view>
      <view class="info">
        <view style="color: #909399;width: 30%;">服务地址</view>
        <text>{{ repairRequest.dormId }}</text>
      </view>
      <view class="info">
        <view style="color: #909399;width: 30%;">报修类型</view>
        <text>{{ repairRequest.repairType }}</text>
      </view>
      <view class="info">
        <view style="color: #909399;width: 30%;">报修详情</view>
        <text>{{ repairRequest.description }}</text>
      </view>
      <view class="info" style="flex-direction: column;">
        <view style="color: #909399;width: 30%;">现场照片</view>
        <view style="margin-top: 30rpx;">
          <image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
          <image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
          <image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
          <image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
          <image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import student from '@/api/student/index.js'
import store from '@/store'
export default {
  data() {
    return {
      repairRequest: {
        time: '',
        dormId: '',
        repairType: '',
        description: '',
        image: '',
        status: ''
      },
      name: '',
      contact: '',
    }
  },
  methods: {
    async getOrderDetail(id) {
      try {
        const res = await student.repairDetail(id)
        this.repairRequest = res.data
      } catch (e) {
        console.log(error)
      }
    }
  },
  async onLoad (option) {
    this.name = store.getters.getUserInfo.name
    this.contact = store.getters.getUserInfo.contact
    console.log(Number(option.id))
    await this.getOrderDetail(Number(option.id))
  }
}
</script>



<style>
.background {
  display: flex;
  background-color: #f3f4f6;
  width: 100%;
  height: 100vh;
  flex-direction: column; /* 使子元素垂直排列 */
}
.order {
  height: 60vh;
  border-radius: 40rpx;
  background-color: #fff;
  margin: 20rpx;
  margin-top: 100rpx;
  padding: 20rpx;
  width:90%;
  font-size: 14px;
}
.info {
  display: flex;
  flex-direction: row;
  margin-bottom: 50rpx;
}
image {
  width: 126rpx;
  height: 126rpx;
  margin-right: 10rpx;
}
</style>